<template>
  <div class="question-detail-container">
    <el-card v-if="questionDetail" class="question-card">
      <!-- 标题区 -->
      <h2 class="question-title">{{ questionDetail.title }}</h2>
      
      <!-- 标签区 -->
      <div class="tag-section">
        <el-tag 
          v-for="(tag, index) in questionDetail.tagList" 
          :key="index"
          type="info"
          class="tag-item"
        >
          {{ tag }}
        </el-tag>
      </div>

      <!-- 问题内容 -->
      <div class="content-section">
        <h3>题目内容</h3>
        <div class="content">{{ questionDetail.content }}</div>
      </div>

      <!-- 参考答案 -->
      <div class="answer-section">
        <h3>参考答案</h3>
        <div class="answer">{{ questionDetail.answer }}</div>
      </div>

      <!-- 用户信息 -->
      <el-card shadow="never" class="user-card">
        <el-row :gutter="20" align="middle">
          <el-col :span="4">
            <el-avatar :src="questionDetail.user.userAvatar" />
          </el-col>
          <el-col :span="20">
            <div class="user-info">
              <h4>{{ questionDetail.user.userName }}</h4>
              <p class="user-desc">{{ questionDetail.user.userProfile }}</p>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const route = useRoute()
const questionDetail = ref(null)

const fetchQuestionDetail = async () => {
  try {
    const { data } = await axios.get('http://localhost:8121/api/question/get/vo', {
      params: {
        id: route.params.id
        // id: 1
      }
    })
    
    if (data.code === 0) {
      questionDetail.value = data.data
    } else {
      ElMessage.error('获取题目详情失败')
    }
  } catch (error) {
    ElMessage.error('请求失败，请检查网络连接')
    console.error('API Error:', error)
  }
}

onMounted(() => {
  fetchQuestionDetail()
})
</script>

<style scoped>
.question-detail-container {
    width: 80%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.question-card {
  margin-top: 20px;
}

.question-title {
  color: #1a1a1a;
  margin-bottom: 20px;
}

.tag-section {
  margin-bottom: 20px;
}

.tag-item {
  margin-right: 10px;
}

.content-section,
.answer-section {
  margin: 30px 0;
}

.content-section h3,
.answer-section h3 {
  color: #2c3e50;
  border-left: 4px solid #409eff;
  padding-left: 10px;
  margin-bottom: 15px;
}

.content,
.answer {
  line-height: 1.8;
  color: #34495e;
}

.user-card {
    width: 40%;
  margin-top: 30px;
  background-color: #f8f9fa;
}

.user-info h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.user-desc {
  color: #7f8c8d;
  margin: 0;
}
</style>